<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>许愿墙</title>

  <link href="../css/bootstrap.css" rel="stylesheet"/>
  <link href="../css/all.css" rel="stylesheet"/>
  <link href="../css/index.css" rel="stylesheet"/>
  <link href="../css/swiper-3.4.2.min.css" rel="stylesheet"/>
  <link rel="stylesheet" href="../css/layui.css" media="all"/>
  <script src="http://at.alicdn.com/t/font_631371_o7qxle1nebmg3nmi.js"></script>
  <script src="../js/jquery-2.0.3.min.js"></script>
  <script src="../js/swiper-3.4.2.min.js"></script>
  <link rel="stylesheet" href="../css/layui.css" media="all"/>
  <script type="text/javascript" src="../js/wish.js"></script>
  <script type="text/javascript" src="../js/jquery.flexText.js"></script>
  
  <script type="text/javascript">
  /*<![CDATA[*/
  var len = 6;
  var m = "";
  $().ready(function(){
	  getWishList(1,len,m);
  })
  
  
  function getFirstPage(){
	  getWishList(1,len,m);
  }
  
	function getBackPage(){
		var now = $("#nowPage").val();
 		if(now>1){
 			now--;
 			getWishList(now,len,m);
 		}
	}
	
	function getNextPage(){
 		var now = $("#nowPage").val();
 		var count = $("#countPage").val();
 		if(now<count){
 			now++;
 			getWishList(now,len,m);
 		}
 	}
 	
 	function getLastPage(){
 		var count = $("#countPage").val();
 		getWishList(count,len,m);
 	}
   
 	function getPage(page){
 		var now = $("#nowPage").val();
 		var count = $("#countPage").val();
 		if(now<count){
 			getWishList(now,len,m);
 		}else{
 			getWishList(count,len,m);
 		}
 	}
	
    function select(){
    	getWishList(1,len,$("#isComeTrue").val());
	}
  
  function getWishList(begin,length,jsonString){
	  $.ajax({
	  		url: "/comment/getWishComment",
	  		data:{begin:begin,length:length,jsonString:jsonString},
	  		type: "GET",
	  		success: function (result){
	  			console.log(result);
	  			if(result!=""){
	  				var data = result.wishList;
	  				var html="";
	        		for(var obj in data){
	        			if(data[obj].isShow==0){
	        				data[obj].commentMsg="该愿望已被删除";
	        	    	}
	        			html+="<div class='comment-show-con clear-f' commentId="+data[obj].id+" wishId="+data[obj].wishId+">";
	        			html+="<div class='comment-show-con-img fl'><img src='"+data[obj].user.headImg+"' alt='用户头像'/></div>";
	        			html+="<div class='comment-show-con-list fl clear-f'>";
	        			html+="<p style='color:blue'>愿望图书："+data[obj].wishing.bookName+"&nbsp;作者："+data[obj].wishing.bookAuthor+"&nbsp;出版社："+data[obj].wishing.bookPress+"</p>";
	        			html+="<div class='pl-text clear-f'><a href='#' class='comment-size-name'>"+data[obj].user.nickname+" : </a>";
	        			html+="<span class='my-pl-con'>&nbsp;"+data[obj].commentMsg+"</span></div>";
	        			html+="<div class='date-dz clear-f'><span class='date-dz-left fl comment-time'>"+data[obj].addTime+"</span>";
	        			html+="<div class='date-dz-right fr comment-pl-block clear-f'>";
	        			if(data[obj].isCurrentUserComment!=""&&data[obj].isCurrentUserComment!=null&&data[obj].isShow!=0){
	        				html+="<a href='javascript:;' class='removeBlock'>删除</a>";
	        			}else{
	        				html+="<a href='javascript:;' class='removeBlock'></a>";
	        			}
	        			html+="<a href='javascript:;' class='date-dz-pl pl-hf hf-con-block fl'>评论(<i class='z-num'>"+data[obj].sonComments+"</i>)</a>";
	        			html+="<span class='fl date-dz-line'>|</span>";
	        			if(data[obj].isCurrentUserLike!=""&&data[obj].isCurrentUserLike!=null){
	        				html+="<a href='javascript:;' class='date-dz-z fl date-dz-z-click'>";
	        			}else{
	        				html+="<a href='javascript:;' class='date-dz-z fl'>";
	        			}
	        			html+="<i class='date-dz-z-click-red'></i>顶Ta (<i class='z-num'>"+data[obj].likes+"</i>)</a>";
	        			html+="</div></div><div class='hf-list-con'></div></div></div>";
	        		}
	        		$('#commentDiv').html(html);
	        		
	        		//获取总记录数
	               	var allRecord = result.allRecord;
	               	//总页数
	               	var countPage = (allRecord%length==0 ? allRecord/length:Math.ceil(allRecord/length));
	               	//当前页数
	               	var nowPage = begin;
	           		$('#nowPage').val(nowPage);
	           		$('#countPage').val(countPage);
	         		$('#pageDiv').html("<span>共"+allRecord+"条许愿</span>");
	  			}
	  		}	
	  	});
  }
  /*]]>*/
  </script>
	
</head>
<body>
  <div th:include="include :: header"></div>

  <input type="hidden" id="countPage"/>
  <div class="container clear-f container-top">
 	<div class="sort-div fl">
        <div class="share-sort" style="background-image:url(../img/355852-16061Q5210611.jpg); ">
        	<div class="box layui-form layui-form-pane" style="margin-top: 20px; ">
        		<br/><br/>
        		<h3 style="color: red">期望的图书详细信息：</h3>
        		<div class="layui-form-item">
	        		<label class="layui-form-label" style="width: 150px;">图书名称：</label>
			        <div class="layui-input-inline">
			           <input class="layui-input"  id="bookName"/>
			        </div>
		        </div>
		        <div class="layui-form-item">
			        <label class="layui-form-label" style="width: 150px;">图书作者：</label>
			        <div class="layui-input-inline">
			           <input class="layui-input"  id="bookAuthor"/>
			        </div>
		        </div>
		        <div class="layui-form-item">
			        <label class="layui-form-label" style="width: 150px;">图书出版社：</label>
			        <div class="layui-input-inline">
			           <input class="layui-input"  id="bookPress"/>
			        </div>
		        </div>
		        <div class="layui-form-item">
			        <label class="layui-form-label" style="width: 150px;">你的愿望宣言：</label>
				    <div class="layui-input-inline">
				      <textarea  class="layui-textarea" id="wishMsg"  ></textarea>
				    </div>
			    </div>
			    <p style="color: red">只有认真填写以上内容，愿望才能实现哦！</p>
		        <button class="layui-btn" onclick="saveComment(0)">发出许愿</button>
        	</div>
        </div>
    </div>
  
    <div class="scd fr">
      <div class="news">
        <div class="news_l">
          <div class="scd_top">
            <span style="color: red">许愿墙</span>
            <div class="pst">
            </div>
          </div>
        </div>
        <div class="news_r">
          <div class="comment-show" id="commentDiv">
          	  <div class="reviewArea clear-f">
              </div>
          	  <!-- 评论 -->
              <div class="comment-show-con clear-f">
                  <div class="comment-show-con-img fl">
                      <img src="../img/portfolio/folio01.jpg" alt=""/>
                  </div>
                  <div class="comment-show-con-list fl clear-f">
                      <div class="pl-text clear-f">
                          <a href="#" class="comment-size-name">许愿墙的自述 : </a>
                          <span class="my-pl-con">&nbsp;来啊 许个愿呀!</span>
                      </div>
                      <div class="date-dz clear-f">
                          <span class="date-dz-left fl comment-time">2018-1-1 00:00:00</span>
                      </div>
                      <div class="hf-list-con"></div>
                  </div>
              </div>
          <!-- 评论end -->    
          </div>
        </div>
        <div class="space_hx">&nbsp;</div>
        <div class="pages flex-b-cc">
          <select onchange="select()" id="isComeTrue" style="padding:5px;margin:0 5px">
          	<option value="">未实现愿望</option>
          	<option value="1">已实现愿望</option>
          </select>
          <span id="pageDiv">共有个愿望</span>
          <a onclick="getFirstPage()">首页</a>
          <a onclick="getBackPage()">上一页</a>
          <a onclick="getNextPage()">下一页</a>
          <a onclick="getLastPage()">尾页</a>
          <input type="text" value="1" id="nowPage" style="padding:5px;margin:0 5px;width:50px"/>
          <a onclick="getPage()">跳转</a>
        </div>
      </div>
    </div>
    
  </div>

  <!-- footer Start -->
  <div th:include="include :: footer"></div>
  <!-- footer End -->

  <script type="text/javascript" src="../js/bootstrap.min.js"></script>
  <script>
    var mySwiper = new Swiper('.swiper-container', {
      pagination : '.swiper-pagination',
      paginationType : 'progress',
      autoplay: 2000,//可选选项，自动滑动
    })
  </script>
</body>

</html>
